.questionBank {
  
  .item {
    padding: 32rpx;
    position: relative;
    display: grid;
    width: 100%;
    box-sizing: border-box;

    .serial-number {
      font-size: 20rpx;
      width: 100%;
      text-align: right;
      margin-bottom: 32rpx;
      color: rgba($color: $primary-text-color, $alpha: 0.7);
    }

    .topic-outline {
      height: 292rpx;
    }

    &-options {
      gap: 52rpx;
      display: flex;
      justify-content: flex-end;

      .option {
        width: 92rpx;
        height: 92rpx;
        border-radius: 50%;
        color: $primary-color;
        text-align: center;
        padding: 12rpx 14rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        line-height: 34rpx;
        border: 2rpx solid $primary-color;
      }

      .option-active {
        color: #fff;
        background-color: $primary-color;
      }
    }

    .divider {
      width: 100%;
      height: 2rpx;
      position: absolute;
      bottom: 144rpx;
      background-color: rgba($color: $primary-text-color, $alpha: 0.1);
    }

    .footer {
      width: 100%;
      display: flex;
      margin-top: 72rpx;
      align-items: flex-end;
      padding-bottom: 0 !important;
      justify-content: space-between;

      .btn {
        width: 240rpx;
        border-radius: 100rpx;
        text-align: center;
        line-height: 80rpx;
        height: 80rpx;
        font-size: 24rpx;
      }

      .btn-prev {
        line-height: 76rpx;
        border: 2rpx solid rgba($color: $primary-text-color, $alpha: 0.1)
      }

      .btn-next {
        color: #fff;
        background-color: $primary-color;
      }
      
      .btn-next-disabled {
        opacity: 0.2;
      }
    }
  }
  
}